<template>
	<div>
		<!-- 头部 -->
		<div class="head">
			<div class="head_left">
				<img src="../assets/LOGO.png" style="height: 70%; width: 40%" />
			</div>
			<div class="head_middle">
				<div class="routerarea">
					<div v-for="(item, index) in Navigationbar" :key="item.id" class="routerarea_item"
						:data-margin="index" @mouseout="mouseoveroutrouternav" @mouseover="mouseoverrouternav">
						<router-link :to="item.path">{{ item.name }}</router-link>
					</div>
				</div>
				<transition name="fade">
					<div class="Underline" :style="{ 'margin-left': margin + '%' }"></div>
				</transition>
			</div>
			<div class="head_right">
				<div class="button_two">
					<img src="../assets/tx.png" />
				</div>
				<div class="button_two" @mouseover="showwx = true" @mouseout="showwx = false">
					<img src="../assets/wx.png" />
				</div>
				<button class="button_one" @click="goReg" v-if="login == false">注册</button>
				<button class="button_one" @click="goLogin" v-if="login == false">登录</button>
				<div style="color:rgba(255, 255, 255, 0.5);margin-right: 40px;font-size: 13px;" v-else>欢迎！{{nickname}}
					|&nbsp;<span class="logout" @click="Logout">退出</span></div>
			</div>
		</div>
		<!-- 路由区域 -->
		<div class="showdetail">
			<router-view></router-view>
		</div>
		<!-- 华为二维码 -->
		<div class="wx" v-show="showwx == true">
			<img src="https://www.huawei.com/~/media/CORP2020/home/nav/guanwei.jpg" style="height: 100%; width: 100%" />
		</div>
	</div>
</template>

<script>
	import {
		Logout
	} from "../https/api";
	export default {
		name: "Home",
		data() {
			return {
				margin: 0,
				Navigationbar: [{
						id: 1,
						path: "/UnderstandHuawei",
						name: "首页",
					},
					{
						id: 2,
						path: "/UnderstandHuawei",
						name: "社会招聘",
					},
					{
						id: 3,
						path: "/Schoolrecruitmentposition",
						name: "校园招聘",
					},
					{
						id: 4,
						path: "/UnderstandHuawei",
						name: "实习招聘",
					},
					{
						id: 5,
						path: "/UnderstandHuawei",
						name: "了解华为",
					},
				],
				showwx: false,
				login: false,
				nickname: null
			};
		},
		methods: {
			// 判断登录
			islogin() {
				let temp = sessionStorage.getItem('TOKEN')
				let nickname = sessionStorage.getItem('nickname')
				if (temp) {
					this.login = true
					this.nickname = nickname
				}
			},
			// 鼠标移上事件
			mouseoverrouternav(e) {
				let value = e.currentTarget.dataset.margin;
				this.margin = value * 11;
			},
			// 鼠标移除事件
			mouseoveroutrouternav(e) {
				let value = e.currentTarget.dataset.margin;
				this.margin = 0;
			},
			// 前往登录
			goLogin() {
				this.$router.push({
					path: "/Login",
				});
			},
			// 前往注册
			goReg() {
				this.$router.push({
					path: "/Reg",
				});
			},
			// 退出登录
			async Logout() {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				const res = await Logout()
				loading.close();
				if (res.code == 1) {
					this.login = false
					this.$message({
						showClose: true,
						message: '退出成功',
						type: 'success'
					});
					sessionStorage.clear()
				} else {
					if (res.code == 401) {
						this.$message({
							showClose: true,
							message: '登录超时,请重新登录!',
							type: 'warning'
						});
						this.login = false
						sessionStorage.clear()
						return
					}
					this.$message({
						showClose: true,
						message: '退出失败',
						type: 'warning'
					});
				}
			}
		},
		created() {
			this.islogin()
		}
	};
</script>

<style lang="scss" scoped>
	.showdetail {
		width: 100%;
		height: calc(87.5vh);
		background-color: white;
	}

	.logout {
		cursor: pointer;

		&:hover {
			color: rgba(255, 255, 255, 1);
		}
	}

	.head {
		width: 100%;
		height: calc(8vh);
		background-color: #18223d;
		display: flex;

		.head_left {
			width: 30%;
			padding-left: 20px;
			display: flex;
			align-items: center;
		}

		.head_middle {
			width: 50%;
			height: 100%;

			.Underline {
				width: 11%;
				height: 10%;
				background-color: #4090ff;
				transition: 1s;
			}

			.routerarea {
				height: 90%;
				width: 55%;
				display: flex;

				.routerarea_item {
					height: 100%;
					width: 20%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.head_right {
			width: 20%;
			display: flex;
			align-items: center;
			flex-direction: row-reverse;
		}
	}

	a {
		text-decoration: none;
		color: rgba(255, 255, 255, 0.5);

		&:hover {
			color: rgba(255, 255, 255, 1);
		}
	}

	.button_one {
		background-color: #18223d;
		color: rgba(255, 255, 255, 0.5);
		padding: 3px 10px 5px;
		border: 1px solid #fff;
		font-size: 13px;
		border-radius: 15px;
		margin-right: 10px;
		transition: 0.3s;

		&:hover {
			color: rgba(255, 255, 255, 1);
		}
	}

	.button_two {
		background-color: #18223d;
		color: rgba(255, 255, 255, 0.5);
		border: 1px solid #fff;
		border-radius: 50%;
		width: 10%;
		height: 50%;
		margin-right: 10px;
		display: flex;
		align-items: center;
		justify-content: center;

		&:hover {
			margin-top: 6px;
		}

		img {
			width: 60%;
			height: 60%;
		}
	}

	.wx {
		position: absolute;
		right: 1.5%;
		top: calc(9vh);
		width: 100px;
		height: 100px;
		background-color: green;
	}
</style>
